<template>
  <div class="home">
    <div class="logo"><img src="/static/images/logo@2x.png" alt=""><span>中德安普竞赛/赛务系统</span></div>
    <div class="content" v-if="loginStep == 1">
      <div class="imgBox">
        <img src="/static/img/homeText.png" alt />
      </div>
      <div class="loginBox">
        <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="在线训练系统" name="first">在线训练系统</el-tab-pane>
          <el-tab-pane label="赛务管理系统" name="second">赛务管理系统</el-tab-pane>
        </el-tabs> -->
        <ul class="tabs">
          <li :class="{'active':cur==0}" @click="cur=0">在线训练系统</li>
          <li :class="{'active':cur==1}" @click="cur=1">赛务管理系统</li>
        </ul>
        <div class="login_form">
          <div class="input_line">
            <input type="text" placeholder="账号/用户名" :autocomplete="off" v-model="mobilePhone">
          </div>
          <div class="input_line">
            <input type="password" placeholder="请输入密码" :autocomplete="off" v-model="password">
          </div>
          <!-- <div class="input_line">
            <input type="text" placeholder="请输入验证码">
            <span class="code" @click="countdown(120)">{{codeBtnText}}</span>
          </div> -->
          <div class="login_btn" @click="goLogin()">登 录</div>
        </div>
      </div>
    </div>
    <div class="loginSure" v-else>
      <p class="sureTitle">
        业财税融合暨大数据管理会计应用能力大赛
      </p>
      <div class="sureBox">
        <p class="title">考生信息核对</p>
        <p class="line"></p>
        <div class="sureMain">
          <el-row>
            <el-col>
              <p>所属学校</p>
            </el-col>
            <el-col>
              <p>{{userInfo.SchoolName}}</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <p>
                <span>姓</span>名
              </p>
            </el-col>
            <el-col>
              <p>{{userInfo.RealName}}</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <p>身份证号</p>
            </el-col>
            <el-col>
              <p>{{userInfo.IdNumber}}</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <p>所属组号</p>
            </el-col>
            <el-col>
              <p>第{{userInfo.GroupNo}}组</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <p>竞赛岗位</p>
            </el-col>
            <el-col>
              <p v-if="userInfo.YcsPositionName">
                <i class="ycs"></i>
                业财税融合
                <b>{{userInfo.YcsPositionName}}</b>
              </p>
              <p v-if="userInfo.BigPositionName">
                <i class="dsj"></i>大数据管理会计
                <b>{{userInfo.BigPositionName}}</b>
              </p>
            </el-col>
          </el-row>
        </div>
        <p class="sureBtn">
          <span @click="sureFn">确认无误</span>
        </p>
      </div>
    </div>
    <div class="tips"><!-- 技术支持：湖南中德安普大数据网络科技有限公司 -->该系统由湖南中德安普大数据网络科技有限公司提供技术支持 Copyright 2021 中德安普大数据服务中心</div>
  </div>
</template>

<script>
  import {
    mapGetters,
    mapActions
  } from "vuex";
 
  export default {
    name: "home",
    data() {
      return {
        off:'off',
        mobilePhone:"",
        password:"",
        codeBtnText:"获取验证码",
        cur: 0,
        activeName: 'first',
        loginStep: 1, //登录步骤
        form: {
          userName: "",
          passWord: ""
        }
      };
    },
    created() {
      //当有用户信息且是考生身份则办位考生信息确认页
      if (this.userInfo && this.userInfo.Type == 1) {
        this.loginStep = 2;
      }
    },
    mounted() {
      // console.log(this.$store);
    },
    methods: {
      //验证码倒计时
      countdown(seconds) {
        this.isCountdown = true;
        var itv = setInterval(() => {
          if (seconds === 0) {
            clearInterval(itv);
            this.isCountdown = false;
            this.codeBtnText = "获取验证码";
            return;
          }
          this.codeBtnText = `${seconds--}秒后重新获取`;
        }, 1000);
      },
      getVerifyCode() {
        this.$Api.GetVerifyCode({ phone: this.account }).then(res => {
          if (res.data) {
            this.countdown(120);
            this.isNexnBtnUseable = true;
            this.$notify({
              title: "提示",
              duration: 2000,
              type: "success",
              message: "验证码已发送，请注意查收！"
            });
          } else {
            this.$notify({
              title: "提示",
              duration: 2000,
              type: "error",
              message: "验证码获取失败，请稍候再试！"
            });
          }
        });
      },
      onKeyLogin(event) {
        if (event.keyCode == 13) {
          this.goLogin();
        }
      },
      //登录
      goLogin() {
        let params = {
          mobilePhone: this.mobilePhone,
          password: this.password
        };
        console.log(this.$Api)
        this.$Api.FormalLogin(params)
          .then(res => {
            if (res.code == 200) {
              console.log(res)
              //保存用户信息
              this.$store.commit(this.$types.USERINFO, res.data);
              //当是考生身份时，变成信息确认页
              if(res.data.userType == 1) {//学生
                this.$router.push({
                  path: "/student/trainingCenter"
                });
              }else if(res.data.userType == 2 || res.data.userType == 4) {//老师
                this.$router.push({
                  path: "/teacher"
                });
              }

            }
          })
          .catch(err => {
            console.log(err, "err");
          });
      },
      //考生确认身份信息
      sureFn() {
        this.$router.push({
          path: '/testSession'
        })
      },
    },
    computed: {
      ...mapGetters({
        userInfo: ["userInfo"],
      })
    },

  };
</script>

<style lang="less">
  input:-internal-autofill-selected {
    background-color:none!important;
  }
  input:-webkit-autofill {
    transition:background-color 5000s ease-in-out 0s;
  }
  .home {
    width: 100vw;
    height: 100vh;
    min-height: 600px;
    min-width: 1440px;
    position: relative;
    // background: url("/static/img/loginBg.png") no-repeat;
    background: url("/static/images/bg@2x.png") no-repeat;
    background-size: 100% 100%;
    .tips{
      position: absolute;
      bottom: 50px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      left: 50%;
      transform: translateX(-50%);
    }
    .logo {
      padding: 40px 0 0 50px;

      img {
        width: 28px;
        height: 28px;
        margin-right: 10px;
      }

      span {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }

    p {
      margin-bottom: 0;
    }

    .content {
      display: flex;
      justify-content: space-between;
      // width: 1100px;
      position: absolute;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%);
      right: 360px;
      top:211px;

      .imgBox {
        display: flex;
        align-items: center;
      }

      .loginBox {
        // width: 395px;
        // height: 395px;
        // background: rgba(255, 255, 255, 1);
        // border-radius: 6px;
        // box-sizing: border-box;
        // padding: 46px 32px;
        width: 440px;
        height: 430px;
        // height: 479px;
        background: #FFFFFF;
        box-shadow: 0px 2px 14px 0px rgba(195, 195, 195, 0.5);
        border-radius: 20px;
        box-sizing: border-box;

        // padding: 46px 32px;
        .tabs {
          overflow: hidden;

          li {
            width: 50%;
            float: left;
            text-align: center;
            height: 100px;
            line-height: 100px;
            position: relative;
            cursor: pointer;
          }

          .active {
            color: #338AFF;

            &::before {
              content: '';
              position: absolute;
              width: 18px;
              height: 4px;
              background: #338AFF;
              border-radius: 3px;
              bottom: 30px;
              left: 100px;
            }
          }
        }

        .login_form {
          width: 380px;
          margin: 0 auto;

          .input_line {
            border-bottom: 1px solid #E8E8E8;
            height: 78px;
            line-height: 75px;
            position: relative;
            input {
              border: none;
              outline: none;
              width: 100%;
              font-size: 14px;
              height: 100%;
              &::-webkit-input-placeholder{
                color: #C2C2C2;
              }
            }
            .code{
              min-width: 100px;
              position: absolute;
              text-align: center;
              cursor: pointer;
              height: 22px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #338AFF;
              line-height: 22px;
              right: 0;
              top: 28px;
            }
          }

          .login_btn {
            margin: 0 auto;
            width: 380px;
            height: 60px;
            line-height: 60px;
            background: #338AFF;
            border-radius: 30px;
            text-align: center;
            margin-top: 48px;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            cursor: pointer;
          }
        }

        .tabsTitle {
          text-align: center;

          span {
            position: relative;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            /*cursor: pointer;*/

            &:nth-of-type(1) {
              /*margin-right: 40px;*/
            }

            i {
              position: absolute;
              bottom: -5px;
              left: 50%;
              transform: translateX(-50%);
              width: 25px;
              height: 2px;
              background: rgba(255, 103, 81, 1);
            }
          }
        }

        .el-form {
          .studentInfo {
            /*margin-top: 34px;*/
            margin-top: 54px;

            .el-form-item {
              /*&:nth-of-type(1) {*/
              /*  .icon {*/
              /*    background: url("/static/img/user.png") no-repeat;*/
              /*  }*/
              /*}*/

              &:nth-of-type(1) {
                .icon {
                  background: url("/static/img/schoolCode.png") no-repeat;
                }
              }

              &:nth-of-type(2) {
                /*margin-bottom: 35px;*/
                margin-bottom: 50px;

                .icon {
                  background: url("/static/img/code.png") no-repeat;
                }
              }
            }
          }

          .judgmentInfo {
            margin-top: 54px;

            .el-form-item {
              &:nth-of-type(1) {
                .icon {
                  background: url("/static/img/user.png") no-repeat;
                }
              }

              &:nth-of-type(2) {
                margin-bottom: 50px;

                .icon {
                  background: url("/static/img/pwd.png") no-repeat;
                }
              }
            }
          }

          .el-form-item {
            border-radius: 2px;
            border: 1px solid rgba(214, 214, 214, 1);
            filter: blur(0px);
            box-sizing: border-box;
            padding-left: 19px;
            margin-bottom: 20px;

            .el-form-item__content {
              .icon {
                display: inline-block;
                height: 12px;
                margin-right: 5px;
                width: 15px;
                line-height: 42px;
              }

              .el-input {
                width: calc(100% - 25px);

                .el-input__inner {
                  border: none;
                  outline: none;
                  padding: 0;
                }
              }
            }
          }

          .goLogin {
            text-align: center;
            height: 42px;
            background: linear-gradient(90deg,
                rgba(2, 169, 254, 1) 0%,
                rgba(6, 136, 250, 1) 100%);
            box-shadow: 0px 8px 16px 0px rgba(2, 167, 254, 0.2);
            border-radius: 2px;
            filter: blur(0px);
            line-height: 42px;
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
        }
      }
    }

    .loginSure {
      position: absolute;
      top: 47%;
      left: 50%;
      transform: translate(-50%, -50%);

      .sureTitle {
        width: 646px;
        font-size: 28px;
        font-family: RTWSShangGo;
        color: rgba(242, 185, 3, 1);
        line-height: 35px;
        text-shadow: 0px 2px 4px rgba(2, 0, 95, 1);
        text-align: center;
      }

      .sureBox {
        width: 560px;
        /*height: 410px;*/
        height: 360px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 6px;
        margin: 60px auto 0;
        box-sizing: border-box;
        padding: 27px 20px;
        text-align: center;

        .title {
          font-size: 18px;
          font-family: PingFangHK-Medium, PingFangHK;
          font-weight: 600;
          color: rgba(6, 139, 250, 1);
          text-align: center;
        }

        .line {
          width: 100%;
          height: 1px;
          background: #E1E1E2;
          margin-top: 23px;
        }

        .sureMain {
          /*width: 360px;*/
          display: inline-block;
          margin: 20px auto 0;

          .el-row {
            margin-bottom: 12px;
            display: flex;

            &:nth-of-type(5) {
              .el-col {
                &:nth-of-type(2) {
                  p {
                    margin-bottom: 8px;
                    position: relative;

                    b {
                      font-weight: 400;
                      margin-left: 8px;
                      color: #999;
                    }

                    i {
                      position: absolute;
                      left: -22px;
                      width: 14px;
                      height: 13px;
                      top: 3px;

                      &.ycs {
                        background: url("/static/img/ycs.png") no-repeat;
                      }

                      &.dsj {
                        background: url("/static/img/dsj.png") no-repeat;
                      }
                    }
                  }
                }
              }
            }

            .el-col {
              &:nth-of-type(1) {
                width: 56px;
                margin-right: 54px;

                p {
                  font-size: 14px;
                  font-family: PingFangHK-Regular, PingFangHK;
                  font-weight: 400;
                  color: #999;

                  span {
                    margin-right: 28px;
                  }
                }
              }

              &:nth-of-type(2) {
                /*width: 250px;*/
                flex: 1;
                text-align: left;

                p {
                  font-size: 14px;
                  font-family: PingFangHK-Medium, PingFangHK;
                  font-weight: 500;
                  color: rgba(51, 51, 51, 1);
                }
              }
            }
          }
        }

        .sureBtn {
          text-align: center;
          margin-top: 14px;

          span {
            display: inline-block;
            width: 210px;
            height: 42px;
            background: linear-gradient(90deg,
                rgba(2, 169, 254, 1) 0%,
                rgba(6, 136, 250, 1) 100%);
            border-radius: 2px;
            filter: blur(0px);
            line-height: 42px;
            font-size: 16px;
            font-family: PingFangHK-Medium, PingFangHK;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
